<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu" background-color="#FFDEE9" :default-active="onRoutes" text-color="#000000"
      active-text-color="#3399CC" router>
      <template v-for="item in items">
        <template>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            {{item.title}}
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [{
            icon: 'el-icon-document',
            index: 'Info',
            title: '系统首页'
          },
          {
            icon: 'el-icon-document',
            index: 'Consumer',
            title: '用户管理'
          },
          {
            icon: 'el-icon-document',
            index: 'Singer',
            title: '歌手管理'
          },
          {
            icon: 'el-icon-document',
            index: 'SongList',
            title: '歌单管理'
          },

        ]
      }
    },
    computed: {
      onRoutes() {
        return this.$route.path.replace('/', '');
      }
    },
  }
</script>

<style>

  .sidebar-el-menu {
    height: calc(100vh - 70px);
  }
</style>
